<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    const proto = Object.create(HTMLElement.prototype, {
        attachedCallback: {
            value: function() {
                const mountPoint = document.createElement('span');
                this.createShadowRoot().appendChild(mountPoint);

                const name = this.getAttribute('name');
                const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
                ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
            }
        }
    });
    document.registerElement('x-search', {prototype: proto});

    class HelloMessage extends React.Component {
        render() {
            return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
        }
    }

    ReactDOM.render(
        <HelloMessage name="miao"/>,
        document.getElementById("example")
    )

</script>
</body>
</html>

